.menu {
  position: absolute;
  z-index: z(menu);
  background-color: white;
  box-shadow: 0 4px 20px 1px rgba(0, 0, 0, .3);
  border-radius: 4px;
  border: 1px solid transparent;
  padding: 4px 0;
  > li > hr {
    margin-top: 4px;
    margin-bottom: 4px;
  }
}

.menu {
  &.top-down.to-right {
    .menu-item > .menu {
      top: 0;
      left: 100%;
      right: initial;
      bottom: initial;
      margin-top: -4px;
    }
  }
  &.top-down.to-left {
    .menu-item > .menu {
      top: 0;
      right: 100%;
      left: initial;
      bottom: initial;
      margin-top: -4px;
    }
  }
  &.bottom-up.to-right {
    .menu-item > .menu {
      bottom: 0;
      left: 100%;
      right: initial;
      top: initial;
      margin-bottom: -4px;
    }
  }
  &.bottom-up.to-left {
    .menu-item > .menu {
      bottom: 0;
      right: 100%;
      left: initial;
      top: initial;
      margin-bottom: -4px;
    }
  }
}

.menu-item {
  position: relative;
}

.menu-item-container {
  display: flex;
  min-width: 140px;
  padding: 4px 8px 4px 20px;
  cursor: default;
  align-items: center;
  &.active {
    background-color: $background-color-highlight;
    color: $text-color-highlight;
  }
  &.disabled, &.active.disabled {
    background-color: transparent;
    color: $text-color-subtle;
  }
  > div {
    display: inline-block;
    white-space: nowrap;
  }
  .menu-item-icon {
    margin-right: 4px;
    width: 16px;
    text-align: center;
    &.fa { margin-right: 4px; }
    &.octicon { margin-right: 4px; }
  }
  .menu-item-name {
    word-break: break-all;
    word-wrap: break-word;
    margin-right: 16px;
  }
  .menu-item-shortcut,
  .menu-item-triangle {
    margin-left: auto;
  }

  .fa-folder {
    color: $tree-view-folder-color;
  }
}


// ContextMenu
.context-menu {
  position: fixed;
  z-index: z(context-menu);
  &.top-down.to-right {
    .menu-item > .menu {
      top: 0;
      left: 100%;
      right: initial;
      bottom: initial;
      margin-top: -4px;
    }
  }
  &.top-down.to-left {
    .menu-item > .menu {
      top: 0;
      right: 100%;
      left: initial;
      bottom: initial;
      margin-top: -4px;
    }
  }
  &.bottom-up.to-right {
    .menu-item > .menu {
      bottom: 0;
      left: 100%;
      right: initial;
      top: initial;
      margin-bottom: -4px;
    }
  }
  &.bottom-up.to-left {
    .menu-item > .menu {
      bottom: 0;
      right: 100%;
      left: initial;
      top: initial;
      margin-bottom: -4px;
    }
  }
}
